<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	div{width:300px;height:300px;background-color:#fafafa;}
	span{width:50px;height:100px;line-height:50px;text-align:center;font-size: 30px;}
</style>
<script type="text/javascript">
	window.onload = function() {
		var oDiv = document.getElementById('div1');
		var aInp = document.getElementsByTagName('input');
		var arrColor = ['red','blue','green','yellow'];

		aInp[1].onclick = function(){
			var str = aInp[0].value;
			var arr = str.split('');	//['','','','']
			// split将字符串转成数组

			aInp[0].value = '';

			for (var i = 0; i < arr.length; i++) {
				arr[i] = '<span style="background-color:'+ arrColor[i%arrColor.length] +';">'+ arr[i] +'</span>';
			};
			oDiv.innerHTML = arr.join('');	//join('')将数组转成字符串，括号内单引号
		}
	}
</script>
<body>
	<div id="div1"></div>
	<input type="text">
	<input type="button" value="发送">
	<p>
		join()和split()的作用刚好相反：<br>
		split():以括号内的字符为分隔符（删去该字符串），字符串str ==> 数组arr;<br>
		join():将括号内的字符插入（添加该字符串）， 数组arr ==> 字符串str.<br>
	</p>
</body>
</html>